Pull request

Related issue

Resolve #173 @handje

Motivation and context

1. 헤더에 로그인버튼 추가

Solution

1. FSD원칙에 따라 shared에서는 상위 폴더를 사용할수없기에 popover 컴포넌트는 features로 이동하였습니다.
2. ui요소는 features가 적합하다고 생각하여 , features에 구현하였습니다. 실제 model에 관련한 로직과 entity는 entities폴더에 구현할 예정입니다.
3. features/auth : 로그인 관련 ui , features/user : 유저 프로필 관련 ui

📂 auth
 └── 📂 ui
      ├── auth-wrapper.tsx
      ├── index.ts
      ├── login-button.tsx
      └── logout-button.tsx
📂 user
 └── 📂 ui
      ├── index.ts
      ├── profile-nickname.tsx
      ├── profile-picture.tsx
      ├── profile-popover-content.tsx
      └── profile-popover.tsx

4. 로그인 뷰는 따로 없이 login버튼 클릭 시, 카카오 로그인 리다이렉션으로 이동할 예정입니다.
5. Header컴포넌트를 불러오는 layout에서 user여부에 따라 컴포넌트를 렌더링합니다.

 <Header authContent={user ? <ProfilePopover /> : <LoginButton />} />

6. user는 zustand로 관리될 예정입니다. 임시로 Login버튼이 보이도록 null처리 해두었습니다. user={}로 할 경우, 기존 popover가 보여집니다.
7. 메인페이지 외에는 로그인이 안될 경우 접근할 수 없도록 redirect처리하였습니다. 리다이렉트전에 화면 깜빡임이 생기는것은 실제 user 상태 추가 후에 리팩토링 할 예정입니다.

const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
  const pathname = usePathname();
  const router = useRouter();
  const user = null;

  useEffect(() => {
    if (!user && pathname !== '/') {
      router.push('/');
    }
  }, [user, pathname]);

  return <>{children}</>;
};
export default AuthWrapper;

...

<AuthWrapper> {children}</AuthWrapper>

How has this been tested

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.